<!-- @format -->

<script setup lang="ts">
const props = defineProps({
  colors: Array,
  current: String,
})
const emit = defineEmits(['change'])
</script>

<template>
  <div class="colors-x">
    <div
      v-for="color in colors"
      class="colors"
      :class="{ active: color === current, trans: color === 'transparent' }"
      :key="color"
      :style="`background-color: ${color}`"
      @click="emit('change', color)"
    ></div>
  </div>
</template>

<style scoped>
.colors-x {
  display: flex;
  align-items: center;
}
.colors {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.colors + .colors {
  margin-left: 16rpx;
}
.colors.active {
  box-shadow: 0 0 0 2px green;
}
.colors.trans:after {
  display: block;
  content: '';
  height: 2px;
  background-color: red;
  transform: translateY(24rpx) rotate(45deg);
  transform-origin: center;
}
</style>
